<template>
  <view class="car-model-card" :class="{ actived: value }" @click="radioChange">
    <view class="card-title">
      <view class="radio" v-if="selectable">
        <ve-icon v-if="value" name="radio-check" width="28" height="28" />
        <ve-icon v-else name="radio-no" width="28" height="28" />
      </view>
      <text>{{ record.modelName }}</text>
      <text class="card-title-tag" v-if="record.useNum > record.stockNum">超卖</text>
    </view>
    <view class="stock-state">
      <text class="stock-state-text">库存：</text>
      <text class="stock-state-value">{{ record.useNum }}/{{ record.stockNum }}</text>

      <ve-tooltip>
        <template #content>
          X/Y X为当前订单占用此车型数量；
          <view>Y为当前门店此车型对应车辆总数</view>
        </template>
        <ve-icon style="margin-left: 12rpx" name="help" size="36" />
      </ve-tooltip>
      <!-- <ve-icon name="help" style="margin-left: 12rpx" color="rgba(23,22, 22, 1)" size="36" /> -->
    </view>
    <view class="card-divider"></view>
    <view class="car-tag-list">
      <view class="car-tag-item" v-for="(item, index) in record.carList.slice(0, 9)" :key="index" :style="tagBackgroundColor(item)">{{
        item.licenseNo
      }}</view>
    </view>
    <!-- 详情 -->
    <view v-if="record.carList.length > 9" class="look-more-btn" @click.stop="handleMore(record)">查看更多</view>
  </view>
</template>

<script setup>
  const props = defineProps({
    /**
     * selectable, 是否可选
     */
    selectable: {
      type: Boolean,
      default: false,
    },
    // 选中的值
    value: Boolean,
    record: {
      type: Object,
      default: () => {},
    },
  })
  const emits = defineEmits(['toDetail', 'change'])
  // 查看详情
  const handleMore = (record) => {
    emits('toDetail', record)
  }
  // 选中
  const radioChange = () => {
    if (props.selectable) {
      emits('change', props.record)
    }
  }
  /**
   * 0:空闲车辆,1:线下订单占用,2:渠道订单占用,3:维修、保养、年检,4:逾期未还,5:车辆冲突,6:丢失
   *
   */
  const tagBackgroundColor = (item) => {
    if (item) {
      if (item.type == 0) {
        return { background: '#FFFFFF', border: '2rpx solid #E5E5E5', color: '#191C27' }
      } else if (item.type == 1) {
        return {
          background: '#99DB6E',
        }
      } else if (item.type == 2) {
        return {
          background: '#7299FF',
        }
      } else if (item.type == 3) {
        return {
          background: '#F6D45F',
        }
      } else if (item.type == 4) {
        return {
          background: '#998EFF',
        }
      } else if (item.type == 5) {
        return {
          background: '#FF7889',
        }
      } else if (item.type == 6) {
        return {
          background: '#B7BFD0',
        }
      } else if (item.type == 7) {
        return {
          background: '#ffca4f',
        }
      } else if (item.type == 8) {
        return {
          background: ' #6edbd7',
        }
      } else if (item.type == 9) {
        return {
          background: '#ff4fb0',
        }
      }
      return {}
    }
  }
</script>

<style lang="scss" scoped>
  .car-model-card {
    min-height: 200rpx;
    background: #ffffff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    margin: 0 24rpx 24rpx;
    box-sizing: border-box;
    padding: 24rpx;
    box-sizing: border-box;
    &.actived {
      outline: 2px solid #3072f6;
    }
    .radio {
      display: inline-block;
      margin-right: 24rpx;
    }
    .card-title {
      font-size: 32rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #191c27;
      .card-title-tag {
        display: inline-block;
        width: 80rpx;
        height: 36rpx;
        background: linear-gradient(58deg, #ff5b60 0%, #ff7a66 100%);
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        opacity: 1;
        border: 2rpx solid #ffffff;
        border-radius: 30rpx;
        text-align: center;
        line-height: 36rpx;
        margin-left: 20rpx;
        vertical-align: 4rpx;
      }
    }
    .stock-state {
      margin-top: 16rpx;
      display: flex;
      align-items: center;
      .stock-state-text {
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #4e5969;
      }
      .stock-state-value {
        margin-left: 4rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #1d2129;
      }
    }
    .card-divider {
      margin-top: 32rpx;
      height: 2rpx;
      background: rgba(216, 216, 216, 0.3);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
    }
    .car-tag-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-left: -20rpx;
      margin-top: -12rpx;
      .car-tag-item {
        width: 204rpx;
        height: 60rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #ffffff;
        border-radius: 4rpx;
        text-align: center;
        line-height: 60rpx;
        margin-top: 32rpx;
        margin-left: 20rpx;
        padding: 0 10rpx;
        // 超出隐藏
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .look-more-btn {
      margin-top: 16rpx;
      text-align: center;
      font-size: 28rpx;
      color: #3072f6;
      line-height: 44rpx;
    }
  }
</style>
